<template>
	<view class="bill">
		<view class="navbar">
			<view class="sys-bar" :style="{height:sysHeight}"></view>
			<view class="navbarh acea-row row-bottom">
				<view class="acea-row row-middle">
					<view class="iconfont icon-jiantou-zuo2" @click.stop="back"></view>
					<view class="title">住房公积金账户明细</view>
				</view>
			</view>
		</view>
		
		<view class="sel-nav">
			<view class="tab-nav acea-row row-around">
				<view class="item" :class="type==0?'on':''" @click.stop="typeClick(0)">
					<view>全部</view>
				</view>
				<view class="item" :class="type==1?'on':''" @click.stop="typeClick(1)">
					<view>缴存</view>
				</view>
				<view class="item" :class="type==2?'on':''" @click.stop="typeClick(2)">
					<view>提取</view>
				</view>
			</view>
			<view class="time-nav acea-row row-between-wrapper">
				<view class="timers acea-row row-between-wrapper">
					<view class="date" @click.stop="dateOpen('start_date',start_date)">		
						{{ start_date?start_date:'请选择' }}
					</view>
					<view>至</view>
					<view class="date" @click.stop="dateOpen('end_date',end_date)">
						{{ end_date?end_date:'请选择' }}
					</view>
				</view>
				<view class="chaxun" @click="chaxun">查询</view>
				<view class="shuaixuan">
					<image class="" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/shuaixuan.png" mode=""></image>
					<!-- <image v-if="order=='desc'"   class="" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/shuaixuan.png" mode=""></image> -->
				</view>
			</view>
		</view>
		
		<view style="width: 100%;height: 400rpx;"></view>
		
		<view class="list">
			<block v-for="(item,index) in productList" :key="index">
				<view class="item">
					<view class="acea-row row-between-wrapper" style="color: #333;">
						<view>{{ item.title }}</view>
						<view>{{ item.number }}</view>
					</view>
					<view class="acea-row row-between-wrapper" style="color: #818181;margin-top: 20rpx;font-size: 24rpx;">
						<view>{{ item.add_time }}</view>
						<view>余额：{{ item.yue }}</view>
					</view>
				</view>
			</block>
<!-- 			<view class='nomore acea-row row-center-wrapper' v-if='productList.length > 0'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view> -->
			<!-- <view class="nomore" v-if="productList.length==0 || productList.length <= 10">暂无更多数据</view> -->
			<view class="gengduo" >点击加载更多</view>
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
		
		 <my-datetime ref="dateTimePop" @ok="timeOk"></my-datetime>
		
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import { datetime } from '@/components/dy-Date/dy-Date.vue';
	import { myDatetime } from '@/components/my-datetime/my-datetime.vue'
	import{
		mingxiList
	} from '@/api/user.js';
	export default {
		components:{
			datetime,
			myDatetime
		},
		data() {
			return {
				sysHeight : sysHeight,
				type:0,
				maxSelect:'',
				page: 1,
				limit: 10,
				loadend: false,
				loading: false,
				loadTitle: this.$t(`点击加载更多`),
				productList:[],
				order:'',
				start_date:'',
				end_date:'',
				dateKey:'',
				starttime:'',
				endtime:'',
			};
		},
		onLoad(options) {
			this.type = options.type ? options.type : 0;
		},
		onShow(){
			this.getTimer();
			this.getlist();
		},
		methods:{
			shuaixuan(val){
				this.order = val;
				this.empty();
				this.getlist();
			},
			chaxun(){
				this.starttime = this.start_date;
				this.endtime = this.end_date;
				this.empty();
				this.getlist();
			},
			// 开启弹窗
			dateOpen (key, date) {
				this.dateKey = key
				this.$refs.dateTimePop.open(date || '');
			},
			// 关闭弹窗
			timeOk (str, obj) {
				console.log(str)
				this[this.dateKey] = str || ''
			},
			empty(){
				let that = this;
				that.loadend = false;
				that.loading = false;
				that.page = 1;
				that.productList = [];
				that.loadTitle = '';
			},
			getlist(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				let data = {
					page : that.page,
					limit : that.limit,
					start_date : this.start_date,
					end_date : this.end_date,
					cunType : that.type==0 ? '': that.type,
					order : that.order
				}
				mingxiList(data).then(res=>{
					let list = res.data.data;
					let productList = that.$util.SplitArray(list, that.productList);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`暂无更多数据`) : that.$t(`点击加载更多`);
					that.$set(that, 'productList', productList);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					that.loading = false;
					that.loadTitle = that.$t(`点击加载更多`);
				})
			},
			typeClick(val){
				this.type = val;
				this.empty();
				this.getlist(); 
			},
			getTimer(){
				let time = new Date();
				let year = time.getFullYear();
				// let month = time.getMonth() + 1 > 10 ? time.getMonth() + 1 : '0'+ (time.getMonth() + 1);
				let month = time.getMonth() + 1 > 10 ? time.getMonth() + 1 : (time.getMonth() + 1);
				let date = time.getDate()>=10 ? time.getDate() : '0'+time.getDate();
				let lastDate = new Date(year, month , 0).getDate();
				this.start_date = (year-1) + '-' + month + '-' + date;
				// console.log(this.start_date);
				this.end_date = year + '-' + month + '-' + date;
			},
			back(){
				uni.navigateBack()
			},
		},
		onReachBottom() {
			// this.getlist();
		},
	}
</script>

<style lang="scss">
	page{ background-color: #fff !important; }
	.bill{
		
		.navbar{
			width: 100%;
			height: 180rpx;
			background-image: url('https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/navbar-bg.png');
			background-size: 100% 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			
			.navbarh{
				width: 100%;
				height: 88rpx;
				padding: 0 30rpx;
				
				.icon-jiantou-zuo2{
					color: #fff;
					font-size: 40rpx;
				}
				.title{ 
					font-size: 36rpx;
					color: #fff;
					margin-left: 20rpx;
				}
			}
		}
		
		.sel-nav{
			width: 100%;
			position: fixed;
			top: 180rpx;
			left: 0;
			right: 0;
			
			.tab-nav{
				width: 100%;
				padding: 10rpx 0;
				background-color: #fff;
				line-height: 88rrpx;
				
				.item{
					font-size: 30rpx;
					display: inline-block;
					line-height: 88rrpx;
					padding: 20rpx 5rpx;
					
					&.on{
						border-bottom: 6rpx solid #3D63D7;
					}
				}
			}
			
			.time-nav{
				background-color: #F4F5F6;
				width: 100%;
				padding: 30rpx;
				
				.timers{
					width: 480rpx;
					height: 60rpx;
					border: 1rpx solid #DDDDDD;
					padding: 0 30rpx;
					
					.date{
						color: #3D63D7;
					}
				}
				.chaxun{
					width: 100rpx;
					margin: 0 20rpx;
					background-color: #3D63D7;
					color: #fff;
					text-align: center;
					line-height: 55rpx;
					border-radius: 8rpx;
					font-size: 26rpx;
				}
				.shuaixuan{
					width: 60rpx;
					height: 60rpx;
					
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		
		}
		
		.list{
			width: 100%;
			background-color: #fff;
			padding: 0 30rpx;
			
			.item{
				padding: 30rpx 0;
				border-bottom: 1rpx solid #e1e1e1;
				font-size: 30rpx;
			}
			.nomore{
				color: #818181;
				font-size: 22rpx;
				text-align: center;
				margin: 30rpx auto;
			}
			.gengduo{
				color: #3D63D7;
				font-size: 22rpx;
				text-align: center;
				margin: 30rpx auto;
			}
		}
		
		
		
		
	}
</style>
